<template>
  <div>
    <h1>count:{{ count }}</h1>
    姓名：<input
      type="text"
      :value="username"
      @input="
        emit('update:username', ($event.target as HTMLInputElement).value)
      "
    />
    <button @click="emit('update:count', count + 1)">add</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Count",
  });
</script>
<script lang="ts" setup>
  const props = defineProps<{ username: string; count: number }>();

  const emit = defineEmits<{
    (event: "update:username", value: string): void;
    (event: "update:count", value: number): void;
  }>();
</script>

<style lang="scss" scoped></style>
